<template>
  <div class="illumination-signage">
    <div class="main-content">
      <div class="search-wrap">
        <el-form :inline="true" :model="params">
          <el-row>
            <el-form-item label="照明类型">
              <el-select
                class="sel-width"
                v-model="params.value"
                placeholder="请选择"
                clearbaler
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <div class="btn-wrap">
              <el-button :icon="Search" type="primary" @click="getList"
                >查询</el-button
              >
            </div>
          </el-row>
        </el-form>
      </div>
      <div class="device-message">
        <div class="project">
          <div class="title">
            <div class="line"></div>
            <span>项目总览</span>
          </div>
          <div class="one-line">
            <div class="device-total">
              <div class="val">10</div>
              <div class="name">设备总数</div>
            </div>
            <div class="polling-time">
              <div class="val">2</div>
              <div class="name">巡检次数</div>
            </div>
          </div>
          <div class="two-line">
            <div class="total">
              <div class="val">20</div>
              <div class="name">报警总数</div>
            </div>
            <div class="done">
              <div class="val">10</div>
              <div class="name">已解决报警</div>
            </div>
            <div class="not-done">
              <div class="val">10</div>
              <div class="name">未解决报警</div>
            </div>
          </div>
        </div>
        <div class="device-status">
          <div class="title">
            <div class="line"></div>
            <span>设备状态</span>
          </div>
          <ul class="ul">
            <li class="normal">
              <div class="device-msg">
                <div class="name">正常设备</div>
                <div class="val">14个</div>
              </div>
              <div class="bgc">
                <div class="color"></div>
              </div>
            </li>
            <li class="warning">
              <div class="device-msg">
                <div class="name">报警设备</div>
                <div class="val">4个</div>
              </div>
              <div class="bgc">
                <div class="color"></div>
              </div>
            </li>
            <li class="outline">
              <div class="device-msg">
                <div class="name">报警设备</div>
                <div class="val">4个</div>
              </div>
              <div class="bgc">
                <div class="color"></div>
              </div>
            </li>
            <li class="fault">
              <div class="device-msg">
                <div class="name">报警设备</div>
                <div class="val">4个</div>
              </div>
              <div class="bgc">
                <div class="color"></div>
              </div>
            </li>
          </ul>
        </div>
        <div class="chart-wrap">
          <div class="title">
            <div class="line"></div>
            <span>亮灯率</span>
          </div>
          <div class="chart-content">
            <div class="open-pie-wrap">
              <OpenLightChart />
              <div class="line">
                <div class="square"></div>
                <span>开灯</span>
              </div>
            </div>
            <div class="close-pie-wrap">
              <CloseLightChart />
              <div class="line">
                <div class="square"></div>
                <span>关灯</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="chart-content-wrap">
        <div class="line-chart">
          <div class="title">
            <div class="line"></div>
            <span>日用能耗曲线</span>
          </div>
          <LineChart />
        </div>
        <ul class="data-wrap">
          <li class="two">
            <div class="title">
              <span class="data">32.0</span>
              <span class="date">2024-08-14 08:00:00</span>
            </div>
            <div class="name">当日(kwh)</div>
          </li>
          <li class="one">
            <div class="title">
              <span class="data">32.0</span>
              <span class="date">2024-08-13 08:00:00</span>
            </div>
            <div class="name">昨日(kwh)</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Search } from "@element-plus/icons-vue";
import OpenLightChart from "./components/OpenLightChart";
import CloseLightChart from "./components/CloseLightChart";
import LineChart from "./components/LineChart";
import Add from "./components/add";

let showAddDeviceDialog = ref(false);
let addDialog = ref(true);
let selVal = ref(1);
let diaForm = reactive({});
let params = reactive({ checkedCities: [], value1: [], value: [] });
let diaParams = reactive({});
let diaTotal = ref(1);
let options = [{ label: 1, value: 1 }];
let handleCheckedCitiesChange = () => {};
let cities = ref([
  {
    key: 1,
    label: "周一",
    value: 1,
  },
  {
    key: 2,
    label: "周二",
    value: 2,
  },
  {
    key: 3,
    label: "周三",
    value: 3,
  },
  {
    key: 4,
    label: "周四",
    value: 4,
  },
  {
    key: 5,
    label: "周五",
    value: 5,
  },
  {
    key: 6,
    label: "周六",
    value: 6,
  },
  {
    key: 7,
    label: "周日",
    value: 7,
  },
]);
const defaultProps = {
  children: "children",
  label: "label",
};
let bgcShow = false;
let addDevice = () => {
  console.log("-=-=");
  showAddDeviceDialog.value = true;
};
let close = () => {
  console.log("主页面guanbi");
  showAddDeviceDialog.value = false;
};
let total = ref(1);
let tableItem = ref([
  {
    prop: "date",
    label: "策略名称",
  },
  {
    prop: "date",
    label: "策略类型",
  },
  {
    prop: "date",
    label: "计划类型",
  },
  {
    prop: "date",
    label: "周期使能",
  },

  {
    prop: "date",
    label: "创建时间",
  },
  {
    prop: "date",
    label: "执行操作",
  },

  {
    prop: "date",
    label: "操作",
  },
]);

const tableData = [
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },
  {
    date: "基波电压(V)",

    name: "基波电流",
  },

  {
    date: "基波电压(V)",

    name: "基波电流",
  },
];
let getList = () => {};
let handleNodeClick = (e) => {
  showDialog.value = true;
};
let handleAdd = () => {
  addDialog.value = true;
};
let save = () => {
  console.log("主页面确定-=-123");
};
const data = [
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
        children: [
          {
            label: "Level three 2-1-1",
          },
        ],
      },
      {
        label: "Level two 2-2",
        children: [
          {
            label: "Level three 2-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 3",
    children: [
      {
        label: "Level two 3-1",
        children: [
          {
            label: "Level three 3-1-1",
          },
        ],
      },
      {
        label: "Level two 3-2",
        children: [
          {
            label: "Level three 3-2-1",
          },
        ],
      },
    ],
  },
];
</script>
<style lang="scss" scoped>
.illumination-signage {
  width: 100%;
  margin-top: 9px;

  .main-content {
    width: 100%;
    height: calc(100vh - 168px - 9px);

    .search-wrap {
      padding-left: 16px;
      padding-top: 8px;
      span {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;
      }

      .sel-width {
        width: 280px;
      }
      .del-btn {
        display: flex;
        align-items: center;
        width: 81px;
        height: 35px;
        background: rgba(133, 18, 20, 0.4);
        border: 1px solid #ff2222;

        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 18px;
        color: #fefefe;
        padding-left: 11px;
        margin-left: 17px;
        img {
          width: 15px;
          height: 17px;
          margin-right: 7px;
        }
      }
      .btn-wrap {
        display: flex;
        align-items: center;
        button {
          cursor: pointer;
        }
        span {
          margin-left: 4px;
        }
        .edit {
          display: flex;
          margin-left: 15px;
          justify-content: center;
          min-width: 81px;
          display: flex;
          justify-content: center;
          align-items: center;

          height: 35px;
          background: rgba(255, 218, 28, 0.4);
          border: 1px solid #ffda1c;

          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 18px;
          color: #fefefe;
        }
        .del {
          min-width: 81px;
          height: 35px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgba(133, 18, 20, 0.4);
          border: 1px solid #ff2222;
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 18px;
          color: #fefefe;
          margin-left: 15px;
        }
        .add {
          min-width: 81px;
          height: 35px;
          background: rgba(31, 144, 12, 0.4);
          border: 1px solid #06ff34;
          margin-left: 48px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 18px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      :deep(.el-col.el-col-1.is-guttered) {
        padding-left: 0px !important;
      }
      :deep(.el-date-editor) {
        width: 300px !important;
      }

      :deep(.el-form-item) {
        margin-bottom: 0px;
      }
      :deep(.el-button) {
        width: 84px;
        height: 35px;
        background: rgba(27, 168, 255, 0.35);
        border: 1px solid #61c8ff;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 18px;
        color: #fefefe;
        border-radius: 0px;

        svg {
          width: 16px !important;
          /* height: 37px !important; */
        }
      }
    }
    .chart-content-wrap {
      margin-top: 10px;
      display: flex;
      align-items: center;
      .line-chart {
        width: 1235px;
        height: 342px;
        background: #022552;
        .title {
          padding-top: 26px;
          padding-left: 27px;
          display: flex;
          align-items: center;

          span {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 20px;
            color: #ffffff;
          }
          .line {
            width: 5px;
            height: 18px;
            background: #61c8ff;
            border-radius: 2px;
            margin-right: 10px;
          }
        }
      }
      .data-wrap {
        width: 355px;
        height: 342px;
        background: #022552;
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        padding-top: 20px;
        .one,
        .two {
          width: 279px;
          height: 130px;
          background: #02183e;
          display: flex;
          flex-direction: column;
          border: 1px solid #61c8ff;
          padding-top: 20px;
          .title {
            padding-top: 0px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;

            align-items: center;

            .data {
              font-family: Source Han Sans CN;
              font-weight: 500;
              font-size: 24px;
              color: #ffffff;
            }
            .date {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 18px;
              color: #ffffff;
              margin-top: 12px;
            }
          }
          .name {
            width: 279px;
            height: 41px;
            background: #044483;
            border: 1px solid #61c8ff;
            flex-shrink: 0;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 20px;
            color: #ffffff;
            text-align: center;
            line-height: 41px;
          }
        }
      }
    }
    .device-message {
      display: flex;
      justify-content: space-between;
      margin-top: 18px;
      .device-status {
        width: 574px;
        height: 355px; /* 383px */
        background: #022552;
        .title {
          display: flex;
          align-items: center;
          padding: 25px 0 0 27px;
          .line {
            width: 5px;
            height: 18px;
            background: #61c8ff;
            border-radius: 3px;
            margin-right: 8px;
          }
          span {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 20px;
            color: #ffffff;
          }
        }
        .ul {
          padding-left: 48px;
          padding-top: 4px;
          /* margin-top: 36px; */
          .normal {
            .bgc {
              .color {
                background: #61c8ff;
              }
            }
          }
          .warning {
            .bgc {
              .color {
                background: #f1e800;
              }
            }
          }
          .outline {
            .bgc {
              .color {
                background: #ffffff !important;
              }
            }
          }
          .fault {
            .bgc {
              .color {
                background: #ff3962;
              }
            }
          }
          li {
            width: 474px;
            margin-top: 30px;
            .device-msg {
              display: flex;
              align-items: center;
              width: 474px;
              justify-content: space-between;
              margin-bottom: 9px;
              .name {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 18px;
                color: #ffffff;
              }
              .val {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 18px;
                color: #ffffff;
              }
            }

            .bgc {
              width: 474px;
              height: 11px;
              background: #8697ac;
              border-radius: 6px;

              .color {
                width: 120px;
                height: 11px;
                background: #f1e800;
                border-radius: 6px;
              }
            }
          }
        }
      }
      .project {
        width: 574px;
        height: 355px; /* 383px */
        background: #022552;
        .title {
          display: flex;
          align-items: center;
          padding: 25px 0 0 27px;
          .line {
            width: 5px;
            height: 18px;
            background: #61c8ff;
            border-radius: 3px;
            margin-right: 8px;
          }
          span {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 20px;
            color: #ffffff;
          }
        }
        .two-line {
          display: flex;
          align-items: center;
          padding: 0 49px 0 64px;
          justify-content: space-between;
          margin-top: 60px;
          .total,
          .done,
          .not-done {
            display: flex;
            flex-direction: column;
            align-items: center;
            .name {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 22px;
              color: #ffffff;
              margin-top: 18px;
            }
            .val {
              font-family: Source Han Sans CN;
              font-weight: bold;
              font-size: 32px;
              color: #61c8ff;
            }
          }
        }
        .one-line {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 145px 0 161px;
          margin-top: 66px;
          .device-total,
          .polling-time {
            display: flex;
            flex-direction: column;
            align-items: center;

            .val {
              font-family: Source Han Sans CN;
              font-weight: bold;
              font-size: 32px;
              color: #61c8ff;
            }
            .name {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 22px;
              color: #ffffff;
              margin-top: 17px;
            }
          }
        }
      }
      .chart-wrap {
        width: 453px;
        height: 355px; /* 383px */
        background: #022552;
        .chart-content {
          display: flex;
          justify-content: space-around;

          .open-pie-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            .line {
              display: flex;
              align-items: center;
              .square {
                width: 17px;
                height: 17px;
                background: #61c8ff;
                margin-right: 14px;
              }
              span {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 22px;
                color: #ffffff;
              }
            }
          }
          .close-pie-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-left: -30px;
            .line {
              display: flex;
              align-items: center;
              .square {
                width: 17px;
                height: 17px;
                background: #eca444;
                margin-right: 14px;
              }
              span {
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-size: 22px;
                color: #ffffff;
              }
            }
          }
        }
        .btm {
          display: flex;
          .left,
          .right {
            display: flex;
            align-items: center;
            span {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 22px;
              color: #ffffff;
            }
          }
        }
        .title {
          display: flex;
          align-items: center;
          padding: 25px 0 0 27px;
          .line {
            width: 5px;
            height: 18px;
            background: #61c8ff;
            border-radius: 3px;
            margin-right: 8px;
          }
          span {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 20px;
            color: #ffffff;
          }
        }
      }
    }
  }
}
</style>
